<template>
    <div class="person">
        <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改对象</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import { reactive, watch } from 'vue';

    let person = reactive({
        name: '张三',
        age: 18,
    });

    function changeName() {
        person.name += '~';
    }

    function changeAge() {
        person.age += 1;
    }

    function changePerson() {
        /* person的地址没有发生变化，这里是修改person的各个属性，这点和ref的情况有区别。*/
        Object.assign(person, { name: '李四', age: 20 });
    }

    /* watch reactive对象是默认开启深度监视的，并且无法关闭（隐式的创建深度监视）。
       watch第一个参数：被监视的数据
       watch第二个参数：数据发生变化时的回调函数
       watch第三个参数：配置对象（deep、immediate。。。） */
    watch(person, (newValue, oldValue) => {
        console.log('person变化了', newValue, oldValue);
    }, { deep: false /* 设置deep无效 */ });
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px
    }
    button {
        margin: 0 5px;
    }
</style>